<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
表单校验:<br>
第一步：给表单中输入项input 设置样式 class="easyui-validatebox" :如果用户输入无效的值,它将改变背景颜色,显示报警图标和一个工具提示消息<br>                        
第二步：给输入项设置验证规则<br>
	***非空校验：通过data-options设置  属性required:true<br>
	***其他校验规则：通过data-options设置validType:email,url,length[x,y],remote<br>
第三步：在提交表单之前做表单校验：验证用户输入项是否全部合法<br>
	<div id="addWindow" class="easyui-window" title="用户新增窗口" style="width: 600px;height: 400px;border:0px" data-options="collapsible:false,minimizable:false">     
		<form action="userAction_save.action" method="post" id="userForm">
			用户名：<input type="text" name="username" class="easyui-validatebox" data-options="required:true,validType:'email'">
			年龄： <input type="text" name="age" class="easyui-numberbox" data-options="required:true,validType:'length[1,3]'">
			<input type="button" value="保存" id="saveBtn">
			<script type="text/javascript">
				$("#saveBtn").click(function(){
					//做表单校验
					var r=$("#userForm").form("validate");
					if(r){
						$("#userForm").submit();
					}
				})
			</script>
		</form>
	</div>  
</body>
</html>







